<template>
  <div class="play-box">
    <div class="title">{{ renderData.lotteryPlayTypeList[0].playTypeName }}</div>
    <div class="play-odds sebo">
      <OddsBtn
        @selectOdds="selectNumber(numItem, renderData.lotteryPlayTypeList[0].playTypeName)"
        v-for="(numItem, index) in renderData.lotteryPlayTypeList[0].cachePlayList"
        :data="{ number: numItem.playName, odds: numItem.maxOdds, color: numItem.color }"
        :key="index"
        :class="{ selected: getSelectNumOddsList.includes(numItem) }"
      />
    </div>
    <div class="game-nav-space" />
    <div class="title">{{ renderData.lotteryPlayTypeList[1].playTypeName }}</div>
    <div class="play-odds">
      <OddsBtn
        @selectOdds="selectNumber(numItem, renderData.lotteryPlayTypeList[0].playTypeName, $event)"
        v-for="(numItem, index) in renderData.lotteryPlayTypeList[1].cachePlayList"
        :data="{ number: numItem.playName, odds: numItem.maxOdds, color: numItem.color }"
        :key="index"
        :class="{ selected: getSelectNumOddsList.includes(numItem) }"
      />
    </div>
  </div>
</template>

<script>
import OddsBtn from './odds-btn.vue'
import mixin from '@/mixin/xglhc-mixin.js'
import { TXT_CLR_MAP } from '@/components/game/xglhc/xglhc-constant'

export default {
  components: {
    OddsBtn,
  },
  mixins: [mixin],
  props: { renderData: {} },
  watch: {
    ['renderData.lotteryPlayTypeList']: {
      handler(list) {
        list.forEach(({ cachePlayList }) => {
          cachePlayList.forEach((item) => {
            const color = Object.keys(TXT_CLR_MAP).find((i) => item.playName.includes(i))
            item['color'] = TXT_CLR_MAP?.[color]
          })
        })
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style scoped lang="less">
@import url('./common.less');
.game-nav-space{
  margin-top: 10px;
}
.sebo {
  justify-content: space-around !important;
}
</style>
